<template>
    <div id="map"></div>
</template>

<script setup>
import { onMounted } from "vue";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import shimen from "@/assets/json/shimen.json";
import AntPathPolyline from "@/tools/AntPathPolyline.js";
import { getVehicleList } from "@/api/getAjaxData";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

onMounted(() => {
    const map = L.map("map", {
        preferCanvas: true,
    }).setView([28.796728, 111.793433], 8);

    L.tileLayer(
        "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
        {
            minZoom: 8,
            maxZoom: 18,
            attribution: "",
        }
    ).addTo(map);

    const geoLayerGroup = L.layerGroup().addTo(map);

    L.geoJSON(shimen, {
        style: {
            weight: 3,
            opacity: 1,
            color: "#0080FF", //边界颜色
            fillOpacity: 0,
            fillColor: "#0080FF", //填充颜色 默认透明度为0.2
        },
    }).addTo(geoLayerGroup);

    const layerGroup = L.layerGroup().addTo(map);

    getVehicleList({})
        .then((res) => {
            for (let i = 0; i < res["vehicleTrack"].length; i++) {
                const car = new AntPathPolyline();
                car.drawAllPoints(
                    map,
                    res["vehicleTrack"][i],
                    layerGroup,
                    i,
                    i
                );
            }
        });
});
</script>

<style scoped>
#map {
    height: 100%;
    width: 100%;
}
</style>
